<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简Markdown编辑器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #3498db;
            --primary-dark: #2980b9;
            --secondary: #2c3e50;
            --light: #f8f9fa;
            --dark: #343a40;
            --border: #eaeaea;
            --success: #27ae60;
            --error: #e74c3c;
            --editor-bg: #ffffff;
            --text: #333333;
            --text-light: #777777;
        }

        body {
            font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .header {
            background: var(--secondary);
            color: white;
            padding: 20px 40px;
            border-radius: 12px 12px 0 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .logo i {
            color: var(--primary);
        }

        .controls {
            display: flex;
            gap: 15px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

        .btn-outline:hover {
            background: rgba(52, 152, 219, 0.1);
        }

        .container {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            flex: 1;
        }

        .editor-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--editor-bg);
            border-radius: 0 0 12px 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        .title-container {
            padding: 25px;
            border-bottom: 1px solid var(--border);
        }

        .title-input {
            width: 100%;
            font-size: 2.2rem;
            font-weight: 700;
            border: none;
            outline: none;
            padding: 10px 0;
            color: var(--secondary);
            background: transparent;
        }

        .title-input::placeholder {
            color: #bbbbbb;
        }

        .editor-wrapper {
            display: flex;
            flex-direction: column;
            height: 70vh;
        }

        .editor-header {
            padding: 15px 25px;
            background: var(--light);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .pane-title {
            font-weight: 600;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .editor-toolbar {
            display: flex;
            gap: 8px;
        }

        .toolbar-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: white;
            border: 1px solid var(--border);
            transition: all 0.2s;
        }

        .toolbar-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .editor-content {
            flex: 1;
            padding: 25px;
            overflow-y: auto;
        }

        #markdown-editor {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            resize: none;
            font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text);
            background: transparent;
        }

        .status-bar {
            padding: 15px 25px;
            background: var(--light);
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .word-count {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .markdown-guide {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--secondary);
            color: white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 100;
            transition: all 0.3s;
        }

        .markdown-guide:hover {
            transform: scale(1.1);
            background: var(--primary);
        }

        .guide-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .guide-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .guide-content {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 30px;
            position: relative;
            transform: translateY(20px);
            transition: transform 0.3s;
        }

        .guide-modal.active .guide-content {
            transform: translateY(0);
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--light);
            cursor: pointer;
            transition: all 0.3s;
        }

        .close-btn:hover {
            background: var(--primary);
            color: white;
        }

        .guide-content h2 {
            color: var(--secondary);
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
        }

        .guide-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .guide-item h3 {
            margin-bottom: 15px;
            color: var(--primary);
        }

        .guide-item ul {
            list-style: none;
        }

        .guide-item li {
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }

        .guide-item code {
            background: var(--light);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
                padding: 15px 20px;
            }

            .title-input {
                font-size: 1.8rem;
            }

            .editor-header {
                padding: 12px 15px;
            }

            .editor-content {
                padding: 15px;
            }

            .status-bar {
                padding: 12px 15px;
                flex-direction: column;
                gap: 8px;
                align-items: center;
            }

            .controls {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .toolbar-btn {
                width: 32px;
                height: 32px;
                font-size: 0.9rem;
            }

            .btn {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
        }

        .focus-mode {
            position: fixed;
            bottom: 80px;
            right: 20px;
            background: var(--secondary);
            color: white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 100;
            transition: all 0.3s;
        }

        .focus-mode:hover {
            transform: scale(1.1);
            background: var(--primary);
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="logo">
            <i class="fas fa-pen-fancy"></i>
            <span>极简Markdown编辑器</span>
        </div>
        <div class="controls">
            <button class="btn btn-outline" id="save-btn">
                <i class="fas fa-save"></i> 保存
            </button>
            <button class="btn btn-primary" id="publish-btn">
                <i class="fas fa-paper-plane"></i> 发布
            </button>
        </div>
    </header>

    <div class="container">
        <div class="editor-container">
            <div class="title-container">
                <input type="text" class="title-input" placeholder="输入文章标题..." id="article-title"
                    value="简约Markdown编辑器的优势与使用指南">
            </div>

            <div class="editor-wrapper">
                <div class="editor-header">
                    <div class="pane-title">
                        <i class="fas fa-edit"></i> Markdown编辑区
                    </div>
                    <div class="editor-toolbar">
                        <div class="toolbar-btn" title="标题" onclick="insertText('# 标题')">
                            <i class="fas fa-heading"></i>
                        </div>
                        <div class="toolbar-btn" title="加粗" onclick="insertText('**粗体**')">
                            <i class="fas fa-bold"></i>
                        </div>
                        <div class="toolbar-btn" title="斜体" onclick="insertText('*斜体*')">
                            <i class="fas fa-italic"></i>
                        </div>
                        <div class="toolbar-btn" title="链接" onclick="insertText('[链接文本](https://)')">
                            <i class="fas fa-link"></i>
                        </div>
                        <div class="toolbar-btn" title="代码块" onclick="insertText('```\n代码块\n```')">
                            <i class="fas fa-code"></i>
                        </div>
                        <div class="toolbar-btn" title="引用" onclick="insertText('> 引用文本')">
                            <i class="fas fa-quote-right"></i>
                        </div>
                        <div class="toolbar-btn" title="列表" onclick="insertText('- 列表项')">
                            <i class="fas fa-list"></i>
                        </div>
                    </div>
                </div>
                <div class="editor-content">
                    <textarea id="markdown-editor">
# 简约Markdown编辑器的优势

## 专注写作体验

现代博客编辑器往往功能繁杂，分散了作者的注意力。简约Markdown编辑器回归本质，只提供核心功能：

- **标题输入**：简洁的标题区域
- **Markdown编辑**：纯净的写作环境
- **高效工具栏**：快速插入常用格式

## Markdown基础语法

```markdown
# 一级标题
## 二级标题
### 三级标题

*斜体文本*
**粗体文本**

- 无序列表项
1. 有序列表项

[链接文本](https://example.com)

> 引用文本

`行内代码`

                    </textarea>
                </div>
            </div>
            <div class="status-bar">
                <div class="word-count">
                    <i class="fas fa-font"></i>
                    <span id="word-count">0</span> 字
                </div>
                <div class="autosave">
                    <i class="fas fa-keyboard"></i>
                    <span>Ctrl+S 保存</span>
                </div>
            </div>
        </div>
    </div>

    <div class="markdown-guide" id="guide-button">
        <i class="fas fa-question"></i>
    </div>

    <div class="focus-mode" id="focus-button">
        <i class="fas fa-expand"></i>
    </div>

    <div class="guide-modal" id="guide-modal">
        <div class="guide-content">
            <div class="close-btn" id="close-guide">
                <i class="fas fa-times"></i>
            </div>
            <h2>Markdown 快速参考指南</h2>

            <div class="guide-grid">
                <div class="guide-item">
                    <h3>基本格式</h3>
                    <ul>
                        <li><code># 标题1</code> → <h1 style="display:inline-block;font-size:1.2rem;margin:0">标题1</h1>
                        </li>
                        <li><code>## 标题2</code> → <h2 style="display:inline-block;font-size:1.1rem;margin:0">标题2</h2>
                        </li>
                        <li><code>**粗体**</code> → <strong>粗体</strong></li>
                        <li><code>*斜体*</code> → <em>斜体</em></li>
                        <li><code>~~删除线~~</code> → <del>删除线</del></li>
                    </ul>
                </div>

                <div class="guide-item">
                    <h3>列表</h3>
                    <ul>
                        <li><code>- 无序列表项</code> → 无序列表项</li>
                        <li><code>1. 有序列表项</code> → 1. 有序列表项</li>
                        <li><code>[ ] 任务项</code> → 未完成任务</li>
                        <li><code>[x] 任务项</code> → 已完成任务</li>
                    </ul>
                </div>

                <div class="guide-item">
                    <h3>链接与媒体</h3>
                    <ul>
                        <li><code>[文本](URL)</code> → <a href="#">文本</a></li>
                        <li><code>![描述](图片URL)</code> → 插入图片</li>
                        <li><code>`代码`</code> → <code>代码</code></li>
                    </ul>
                </div>

                <div class="guide-item">
                    <h3>高级元素</h3>
                    <ul>
                        <li><code>> 引用文本</code> → <blockquote
                                style="margin:5px 0;padding-left:10px;border-left:3px solid #ccc;">引用文本</blockquote>
                        </li>
                        <li><code>---</code> → 水平分割线</li>
                        <li><code>```代码块```</code> → 代码块</li>
                        <li><code>| 表格 | 示例 |</code> → 创建表格</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const editor = document.getElementById('markdown-editor');
        const titleInput = document.getElementById('article-title');
        const wordCountEl = document.getElementById('word-count');
        const saveBtn = document.getElementById('save-btn');
        const publishBtn = document.getElementById('publish-btn');
        const guideButton = document.getElementById('guide-button');
        const focusButton = document.getElementById('focus-button');
        const guideModal = document.getElementById('guide-modal');
        const closeGuide = document.getElementById('close-guide');

        // 更新字数统计
        function updateWordCount() {
            const text = editor.value;
            // 简单的字数统计（中英文都算一个字）
            const wordCount = text.replace(/\s+/g, '').length;
            wordCountEl.textContent = wordCount;
        }

        // 插入文本到编辑器
        function insertText(text) {
            const start = editor.selectionStart;
            const end = editor.selectionEnd;
            const selectedText = editor.value.substring(start, end);

            // 在光标位置插入文本
            editor.value = editor.value.substring(0, start) + text + editor.value.substring(end);

            // 设置新的光标位置
            const newPos = start + text.length;
            editor.selectionStart = newPos;
            editor.selectionEnd = newPos;

            // 聚焦编辑器
            editor.focus();
            updateWordCount();
        }

        // 保存功能
        function saveContent() {
            // 添加视觉反馈
            saveBtn.innerHTML = '<i class="fas fa-check"></i> 已保存';
            saveBtn.style.backgroundColor = '#27ae60';
            saveBtn.style.borderColor = '#27ae60';
            saveBtn.style.color = 'white';

            // 在实际应用中，这里可以添加代码将内容保存到服务器
            console.log("内容已保存:", {
                title: titleInput.value,
                content: editor.value
            });

            // 3秒后恢复按钮状态
            setTimeout(() => {
                saveBtn.innerHTML = '<i class="fas fa-save"></i> 保存';
                saveBtn.style.backgroundColor = '';
                saveBtn.style.borderColor = '';
                saveBtn.style.color = '';
            }, 2000);
        }

        // 发布功能
        function publishContent() {
            // 添加视觉反馈
            const originalText = publishBtn.innerHTML;
            publishBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 发布中...';
            publishBtn.disabled = true;

            // 模拟发布过程
            setTimeout(() => {
                publishBtn.innerHTML = '<i class="fas fa-check"></i> 已发布';
                publishBtn.style.backgroundColor = '#27ae60';

                // 在实际应用中，这里可以添加代码将内容发布到服务器
                console.log("内容已发布:", {
                    title: titleInput.value,
                    content: editor.value
                });

                // 5秒后恢复按钮状态
                setTimeout(() => {
                    publishBtn.innerHTML = originalText;
                    publishBtn.style.backgroundColor = '';
                    publishBtn.disabled = false;
                }, 2000);
            }, 1500);
        }

        // 设置事件监听器
        editor.addEventListener('input', updateWordCount);
        titleInput.addEventListener('input', updateWordCount);

        saveBtn.addEventListener('click', saveContent);
        publishBtn.addEventListener('click', publishContent);

        // 初始更新字数
        updateWordCount();

        // Markdown指南功能
        guideButton.addEventListener('click', () => {
            guideModal.classList.add('active');
        });

        closeGuide.addEventListener('click', () => {
            guideModal.classList.remove('active');
        });

        // 点击模态框外部关闭
        guideModal.addEventListener('click', (e) => {
            if (e.target === guideModal) {
                guideModal.classList.remove('active');
            }
        });

        // 键盘快捷键
        document.addEventListener('keydown', (e) => {
            // Ctrl+S / Cmd+S 保存
            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
                e.preventDefault();
                saveContent();
            }

            // 问号键打开指南
            if (e.key === '?') {
                guideModal.classList.toggle('active');
            }
        });

        // 专注模式
        let isFocusMode = false;
        focusButton.addEventListener('click', () => {
            isFocusMode = !isFocusMode;

            if (isFocusMode) {
                document.documentElement.style.overflow = 'hidden';
                document.body.style.overflow = 'hidden';
                editor.style.fontSize = '1.2rem';
                editor.style.lineHeight = '1.9';
                focusButton.innerHTML = '<i class="fas fa-compress"></i>';
                focusButton.title = '退出专注模式';
            } else {
                document.documentElement.style.overflow = '';
                document.body.style.overflow = '';
                editor.style.fontSize = '';
                editor.style.lineHeight = '';
                focusButton.innerHTML = '<i class="fas fa-expand"></i>';
                focusButton.title = '专注模式';
            }
        });
    </script>
</body>

</html>